<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:insert="~{include :: header('新增课程卡主')}" />
    <th:block th:insert="~{include :: datetimepicker-css}" />
</head>
<body class="hold-transition">
<div class="container-fluid mt-2 mb-2">
        <form class="form-horizontal m" id="form-card-add">
            <input type="hidden" name="courseIds" id="courseIdHidden"/>
            <input type="hidden" name="type" value="1"/>
            <input type="hidden" name="courseName" id="cardCourseName"/>
            <div class="form-group row" style="margin-top: 30px">
                <label class="col-sm-3 col-form-label is-required text-sm-right">课程卡名称</label>
                <div class="col-sm-5">
                    <input name="name" class="form-control" type="text" placeholder="输入课程卡名称">
                </div>
            </div>
            <div class="form-group row" id="limitCourse">
                <label class="col-sm-3 col-form-label text-sm-right">选择课程</label>
                <div class="col-sm-6" style="padding-top: 4px">
                    <button type="button"  onclick="courseAdds()" class="btn btn-xs btn-success"><i class="fa fa-plus"></i> 添加课程</button>&nbsp;
                    <button type="button"  onclick="courseRemove()" class="btn btn-xs btn-danger"><i class="fa fa-trash"></i> 清空 </button>
                    <div style="margin-top: 20px" id="courselist">
                    </div>
                </div>
            </div>
            <div class="form-group row">
                <label class=" col-sm-3 col-form-label font-noraml text-sm-right">有效期</label>
                <div class="col-sm-4 input-daterange input-group">
                    <input type="text" autocomplete="off" name="beginDate" class="input-sm form-control" id="datetimepicker-startDate" placeholder="起始日期"/>
                    <span class="input-group-addon">至</span>
                    <input type="text" autocomplete="off" name="endDate" class="input-sm form-control" id="datetimepicker-endDate" placeholder="到期日期"/>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-3 col-form-label is-required text-sm-right">数量</label>
                <div class="col-sm-2">
                    <input name="num" id="cardNum"  class="form-control" type="number">
                </div>
            </div>
        </form>
    </div>
    <th:block th:insert="~{include :: footer}" />
    <th:block th:insert="~{include :: datetimepicker-js}" />
    <script type="text/javascript">
        $("#form-card-add").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                if($("#courseIdHidden").val() == ""){
                    $.modal.msgError('至少选择一门课程')
                    return false;
                }
                if(parseInt($("#cardNum").val()) <= 0){
                    $.modal.msgError('生成数量必选大于"0"，并且是正整数')
                    return false;
                }
                if (parseInt($("#cardNum").val()) > 1000) {
                    $.modal.msgError("生成课程卡数量不能大于1000");
                    return false;
                }
                var data = $("#form-card-add").serializeArray();
                $.operate.save("/card/course/add.json", data);
            }
        }

        $("#datetimepicker-startDate").datetimepicker({
            format:'Y-m-d',
            formatDate:'Y-m-d',
            formatTime:'H:i:00',
            timepicker: false
        }).on('changeDate', function(event) {
            event.preventDefault();
            event.stopPropagation();
            var startDate = event.date;
            $('#datetimepicker-startDate').datetimepicker('setStartDate', startDate);
        });

        $("#datetimepicker-endDate").datetimepicker({
            format:'Y-m-d',
            formatDate:'Y-m-d',
            formatTime:'H:i:00',
            timepicker: false
        }).on('changeDate', function(event) {
            event.preventDefault();
            event.stopPropagation();
            var endDate = event.date;
            $("#datetimepicker-startDate").datetimepicker('setEndDate', endDate);
        });

        //添加课程
        function courseAdds(){
            $.modal.open('选择课程', "/course/select.html", '90%', '90%');
        }

        function courseList(courseArr){
            var courseId = "";
            var cardCourseName = "";
            if(courseArr.length > 0){
                $("#courselist").empty();
                for(var i=0;i<courseArr.length;i++){
                    courseId += courseArr[i].courseId+",";
                    var courseName = courseArr[i].courseName+",";
                    cardCourseName += courseName;
                    $("#courselist").append("<p style='color: #2d93ca'><i class='fa fa-tasks'></i> "+courseName+"</p>")
                }
                var reg=/,$/gi;
                courseId=courseId.replace(reg,"");
                cardCourseName = cardCourseName.replace(reg,"");
            }
            $("#courseIdHidden").val(courseId);
            $("#cardCourseName").val(cardCourseName);
        }

        function courseRemove() {
            $("#courselist").empty();
            $("#courseIdHidden").val("");
        }
    </script>
</body>
</html>